h2{
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  padding: 20px 0;
}
.recommend{
  background-color: #fff;
  >.recommend-conter{
    >ul{
      width: 1080px;
      height: 60px;
      padding: 0 55px;
      background-color: white;
    
      >li{
        float: left;
        width: 180px;
        height: 60px;
        display: flex;
        flex-direction:column ;
        align-items: center;
        position: relative;
        padding-top: 5px;
        
        >div{
          width: 70px;
          height: 27px;
          padding: 0 5px;
          cursor: pointer;
          font-weight: 900;
          border-radius: 50px;
          text-align: center;
          line-height: 27px;
          &:hover{
            color: #e1251b;
          }
        }
        >p{
          color: #999;
          font-size: 14px;
          text-align: center;
          padding-top: 5px;
        }
        >i{
          position: absolute;
          right: 0;
          top: 10px;
          height: 40px;
          width: 1px;
          color: #666;
          background: linear-gradient(180deg,white,#dfdfdf 51%,white)
        }
        
      }
      >.action{
        >div{
          background-color: #e1251b;
          color: white;
          &:hover{
            color: #fff;
          }
        }
        >p{
          color: #e1251b;
        }
      }
    }
    >.contentbox{
      margin-top: 10px;
      width: 1190px;
      display: none;
      >.box{
        width: 233px;
        height: 332px;
        margin-top: 10px;
        margin-right: 5px;
        position: relative;
        float: left;
        &:hover .mask{
          display: block;
        }
        >.content{
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          background-color: white;
          >img{
            margin: 30px 40px 40px 40px ;
            width: 150px;
            height: 150px;
          }
          >p{
            width: 190px;
            // height: 28px;
            font-size: 14px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            padding: 0 20px;
          }
          >div{
            color: #e1251b;
            margin: 25px;
            >span{
              font-size: 12px;
            }
            >i{
              font-size: 16px;
              font-weight: 900;
            }
            >div{
              float: right;
              font-size: 12px;
              width: 28px;
              height: 15px;
              border: 1px solid #e1251b;
              line-height: 15px;
            }
          }
        }
        >.mask{
          display: none;
          position: absolute;
          bottom: 30px;
          left: 0;
          width: 100%;
          height: 66px;
          background: linear-gradient(180deg,rgba(255,255,255,.8) 0,white 35%,white);
          >div{
            margin: 30px auto;
            width: 120px;
            height: 28px;
            background-color: #333;
            border: 1px solid #353131;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover{
              background-color: #e1251b;
              border: 1px solid #e1251b;
            
            }
            >span{
              color: white;
            }
            >img{
              margin-right: 3px;
            }
          }
        }
      }
    }
    >.display{
      display: block;
    }
  }
}